<template>
  <div class="swiper">
    <van-swipe class="my-swipe" :autoplay="3000" @change="onChange">
      <van-swipe-item v-for="(item, index) in banner" :key="index">
        <img :src="item" alt />
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/{{banner.length}}</div>
      </template>
    </van-swipe>
  </div>
</template>

<script>
import { Swipe, SwipeItem } from "vant";
export default {
  name: "Swiper",
  props: ["banner"],
  data() {
    return {
      current: 0,
    };
  },
    methods: {
    onChange(index) {
      this.current = index;
    },
  },
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
  },
};
</script>

<style lang="less" scoped>
.my-swipe img {
  width: 100%;
  height: 346px;
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 10px;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 12px;
  color: #fff;
  background: rgba(49, 49, 49, 0.3);
}
</style>